import React, { useEffect, useState } from "react";
import ReactECharts from "echarts-for-react";
import { Row, Col } from "antd";
import axios from "axios";
import { useNavigate } from "react-router-dom";
const Home: React.FC = () => {
  const [option, setOption] = useState({});
  const [option1, setOption1] = useState({});
  const navigate = useNavigate();
  const getOption = async () => {
    const resp = await axios.get("http://localhost:3000/api/list/echarts/area");

    const data = resp.data.data;
    setOption({
      xAxis: {
        type: "category",
        data: data.map((v) => v.name),
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: data.map((v) => v.count),
          type: "line",
          show: true,
        },
      ],
    });
  };
  const getOption1 = async () => {
    const resp = await axios.get("http://localhost:3000/api/list/echarts/type");
    const data = resp.data.data;

    setOption1({
      xAxis: {
        type: "category",
        data: data.map((v) => v.name),
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: data.map((v) => v.count),
          type: "bar",
          showBackground: true,
          backgroundStyle: {
            color: "rgba(180, 180, 180, 0.2)",
          },
        },
      ],
    });
  };

  const onEvents = {
    click(params) {
      navigate('/list/manage?type=' + params.name)
    },
  };

  useEffect(() => {
    getOption();
    getOption1();
  }, []);

  return (
    <div>
      <Row>
        <Col span={20}>
          <ReactECharts
            option={option}
            style={{ height: 400, width: "100%" }}
          />
        </Col>
      </Row>
      <Row>
        <Col>
          <ReactECharts
            onEvents={onEvents}
            option={option1}
            style={{ height: 400, width: 600 }}
          />
        </Col>
      </Row>
    </div>
  );
};

export default Home;
